/* 获取到元素 */
const buttons = document.querySelectorAll(".ripple");
/* 循环获取到的所有buttons元素 */
buttons.forEach((button) => {
  /* 添加点击事件 */
  button.addEventListener("click", function (e) {
    /* 获取按钮在x轴上的位置 */
    const x = e.clientX;
    /* 获取按钮在轴上的位置 */
    const y = e.clientY;

    const buttonTop = e.target.offsetTop;
    const buttonLeft = e.target.offsetLeft;

    const xInside = x - buttonLeft;
    const yInside = y - buttonTop;
    /* 创建一个span元素 */
    const circle = document.createElement("span");
    /* 给span添加上circle样式 */
    circle.classList.add("circle");
    /* 上距离父元素的距离 */
    circle.style.top = yInside + "px";
    /* 左距离父元素的距离 */
    circle.style.left = xInside + "px";
    /* 在button里面添加上span元素 */
    this.appendChild(circle);

    setTimeout(() => {
      /* 0.5秒后移除掉创建的span元素 */
      return circle.remove();
    }, 500);
  });
});
